<template>
  <el-row>
    <el-col>
      <el-table :data="cardList" style="width: 100%">
        <el-table-column prop="id" v-if="false"/>
        <el-table-column label="卡片标题" prop="title"/>
        <el-table-column label="下次复习时间" prop="nextReviewTime"/>

        <el-table-column align="right">
          <template #header>
            <el-button type="primary" @click="addCollection"
            >新增
            </el-button
            >
            <el-button type="success" @click="handleUpdate">刷新</el-button>
          </template>
          <template #default="scope">
            <el-button
                size="small"
                @click="handleEdit(scope.$index, scope.row)"
            >Edit
            </el-button
            >
            <el-button
                size="small"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)"
            >Delete
            </el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-col>
  </el-row>
  <!-- 弹出窗 -->
</template>

<script>
import {ref} from "vue";

export default {
  inject: ['reload'],
  name: "CollectionList",
  data() {
    return {
      cardList: ref([]),
      dir1Id: ''
    };
  },
  methods: {
    addCollection() {
      this.$prompt("请输入新的卡片", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        inputPattern: /^.+$/,
        inputErrorMessage: "卡片名称不能为空",
      }).then(({value}) => {
        this.$axios.post("/card/insert", {
              title: value,
              dir1Id: this.dir1Id
            }
        ).then((response) => {
          console.log(response);
          this.getData();
        });
        this.$message({
          type: "success",
          message: "新增卡片是: " + value,
        });
      }).catch(() => {
        this.$message({
          type: "info",
          message: "取消输入",
        });
      });
    },
    handleDelete(index, value) {
      this.$confirm(
          "此操作将永久该卡片, 是否继续?",
          "提示",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }
      ).then(() => {
        this.$axios.get("/card/delete", {
          params: {cardId: value.id},
        }).then((response) => {
          if (response.status === 200) {
            this.$message({
              type: "success",
              message: "删除成功!",
            });
            this.getData();
          } else {
            this.$message({
              type: "info",
              message: "删除失败!",
            });
          }
        });
      }).catch(() => {
        this.$message({
          type: "info",
          message: "已取消删除",
        });
      });
    },
    handleUpdate() {
      this.$axios.get("/card/getCard?dir1Id=" + this.dir1Id).then((response) => {
        this.cardList = response.data;
      });
    },

    //获取数据
    getData() {
      if (this.$route.fullPath !== '') {
        this.dir1Id = this.$route.fullPath.split("=")[1];
        this.$axios.get("/card/getCard?dir1Id=" + this.dir1Id).then((response) => {
          this.cardList = response.data;
        });
      }
    },
    resetData() {
      if (this.$route.path === "/cardList") {
        this.getData();
      }
    }
  },
  watch: {
    $route: {
      handler: 'resetData'
    }
  },
  created() {
    this.getData();
  },
};
</script>

<style>
.el-row {
  margin-bottom: 10px;
  margin-top: 10px;
}

.el-row:last-child {
  margin-bottom: 0;
}

.el-col {
  border-radius: 4px;
}
</style>
